<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';

// 数据定义
const selectedValue = ref('')
const selectedYear = ref('2025')
const hideNoDataEmployees = ref(false)
const showDetailDialog = ref(false)
const activeTabName = ref('overview')

// 筛选选项
const filterOptions = ref([
  { value: 'all', label: '所有部门' },
  { value: 'service', label: '服务类型' }
])

// 统计数据显示
const statisticsData = ref({
  // 2025年数据
  year2025: {
    expiredCount: 0,      // 到期客户
    renewedCount: 0,      // 已续签客户
    renewalRate: '0%' // 续签率
  },
  // 2025年10月数据
  october2025: {
    expiredCount: 0,
    renewedCount: 0,
    renewalRate: '0%'
  }
})

// 表格数据
const tableData = ref([
  {
    employeeName: '员工A',
    yearlyStats: {
      totalExpired: 0,
      renewedCount: 0,
      expiredNotRenewed: 0,
      pendingRenewal: 0,
      renewalRate: '0%',
      lostCustomers: 0
    },
    monthlyStats: {
      expiredCount: 0,
      renewedCount: 0,
      notRenewedCount: 0,
      renewalRate: '0%',
      lostCustomers: 0
    }
  }
])

// 查看明细数据
const detailData = ref([
  { productName: '基础代账服务', contractCount: 0 },
  { productName: '税务申报服务', contractCount: 0 },
  { productName: '财务咨询', contractCount: 0 }
])

// 图表引用
const mainChartRef = ref(null)
const pieChartRef = ref(null)

// 柱状图配置 - 续签情况
const barChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['到期客户数', '已续签客户数'],
    top: 10,
    right: 20
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      color: '#666',
      interval: 0
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: '#666' },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#eee'
      }
    }
  },
  series: [
    {
      name: '到期客户数',
      type: 'bar',
      itemStyle: { color: '#ff9c00' },
      data: [120, 132, 101, 134, 90, 230, 210, 200, 320, 500, 220, 200]
    },
    {
      name: '已续签客户数',
      type: 'bar',
      itemStyle: { color: '#67c23a' },
      data: [100, 120, 90, 110, 80, 200, 180, 150, 280, 450, 200, 180]
    }
  ]
}

// 饼图配置 - 合同分布
const pieChartOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center',
    textStyle: {
      fontSize: 12
    }
  },
  series: [
    {
      name: '合同分布',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['40%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 12,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '基础代账' },
        { value: 735, name: '税务申报' },
        { value: 580, name: '财务咨询' },
        { value: 484, name: '审计服务' },
        { value: 300, name: '其他服务' }
      ]
    }
  ]
}

// 查看明细
const openDetailView = function() {
  showDetailDialog.value = true
}

// 初始化图表
onMounted(() => {
  nextTick(() => {
    // 初始化柱状图
    if (mainChartRef.value) {
      const barChart = echarts.init(mainChartRef.value)
      barChart.setOption(barChartOption)
    }
    
    // 初始化饼图
    if (pieChartRef.value) {
      const pieChart = echarts.init(pieChartRef.value)
      pieChart.setOption(pieChartOption)
    }
    
    // 窗口大小变化时重绘图表
    window.addEventListener('resize', () => {
      if (mainChartRef.value) {
        const chart = echarts.getInstanceByDom(mainChartRef.value)
        chart && chart.resize()
      }
      if (pieChartRef.value) {
        const chart = echarts.getInstanceByDom(pieChartRef.value)
        chart && chart.resize()
      }
    })
  })
})
</script>

<template>
  <div class="contract-renewal">
    <!-- 顶部筛选区域 -->
    <div class="header-section">
      <div class="header-content">
        <el-date-picker 
          v-model="selectedYear" 
          type="year" 
          placeholder="选择年份"
          class="year-picker"
        />
        <el-select v-model="selectedValue" placeholder="所有服务类型" class="service-select">
          <el-option 
            v-for="item in filterOptions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value" 
          />
        </el-select>
        <el-checkbox v-model="hideNoDataEmployees" label="隐藏无数据员工" class="hide-checkbox" />
        <a href="#" class="report-link">报表逻辑说明</a>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 上半部分：统计概览 -->
      <div class="overview-section">
        <div class="chart-panel">
          <div class="panel-header">
            <h3>2025年代账客户续签情况</h3>
            <span class="chart-unit">单位：户</span>
          </div>
          <div ref="mainChartRef" class="chart-container"></div>
        </div>
        
        <div class="stats-panel">
          <!-- 2025年续签率 -->
          <div class="stats-group">
            <div class="stats-header">
              <h3>2025年续签率</h3>
            </div>
            <div class="stats-content">
              <div class="stat-item">
                <div class="stat-value">{{ statisticsData.year2025.expiredCount }}</div>
                <div class="stat-label">2025年到期客户</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ statisticsData.year2025.renewedCount }}</div>
                <div class="stat-label">2025年已续签客户</div>
              </div>
            </div>
          </div>
          
          <!-- 2025年10月续签率 -->
          <div class="stats-group">
            <div class="stats-header">
              <h3>2025年10月续签率</h3>
            </div>
            <div class="stats-content">
              <div class="stat-item">
                <div class="stat-value">{{ statisticsData.october2025.expiredCount }}</div>
                <div class="stat-label">2025年10月到期客户</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ statisticsData.october2025.renewedCount }}</div>
                <div class="stat-label">2025年10月已续签客户</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下半部分：详细分析 -->
      <div class="analysis-section">
        <div class="distribution-panel">
          <div class="distribution-content">
            <div ref="pieChartRef" class="pie-chart"></div>
            <button class="detail-btn" @click="openDetailView">查看明细</button>
          </div>
          
          <!-- 查看明细对话框 -->
          <el-dialog v-model="showDetailDialog" title="2025年续签代账合同分布" width="400px">
            <el-table :data="detailData" border>
              <el-table-column prop="productName" label="服务产品" width="200" />
              <el-table-column prop="contractCount" label="份数" width="100" />
            </el-table>
            <template #footer>
              <el-button @click="showDetailDialog = false">取消</el-button>
              <el-button type="primary" @click="showDetailDialog = false">确定</el-button>
            </template>
          </el-dialog>
        </div>
        
        <div class="contract-panel">
          <div class="panel-header">
            <h3>2025年续签代账合同分布</h3>
          </div>
          <div class="panel-content">
            <!-- 这里可以添加合同分布的详细内容 -->
            <div class="distribution-stats">
              <div class="dist-item">
                <span class="dist-label">基础代账服务</span>
                <span class="dist-value">45%</span>
              </div>
              <div class="dist-item">
                <span class="dist-label">税务申报服务</span>
                <span class="dist-value">30%</span>
              </div>
              <div class="dist-item">
                <span class="dist-label">财务咨询</span>
                <span class="dist-value">15%</span>
              </div>
              <div class="dist-item">
                <span class="dist-label">其他服务</span>
                <span class="dist-value">10%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部表格区域 -->
      <div class="table-section">
        <div class="table-header">
          <div class="filter-group">
            <el-select v-model="selectedValue" placeholder="员工/部门" class="employee-select">
              <el-option 
                v-for="item in filterOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value" 
              />
            </el-select>
            <el-date-picker 
              v-model="selectedYear" 
              type="month" 
              placeholder="开始日期"
              class="date-picker"
            />
            <span class="date-separator">~</span>
            <el-date-picker 
              v-model="selectedYear" 
              type="month" 
              placeholder="结束日期"
              class="date-picker"
            />
          </div>
          <div class="table-actions">
            <el-button class="export-btn">导出</el-button>
            <el-button class="help-btn">获取帮助</el-button>
          </div>
        </div>
        
        <div class="table-container">
          <el-table :data="tableData" border class="renewal-table">
            <el-table-column width="30" />
            <el-table-column prop="employeeName" label="员工/部门" width="120" />
            
            <!-- 2025全年续签情况 -->
            <el-table-column label="2025年全年续签情况">
              <el-table-column prop="yearlyStats.totalExpired" label="本年到期户数" width="100" />
              <el-table-column prop="yearlyStats.renewedCount" label="已续签户数" width="100" />
              <el-table-column prop="yearlyStats.expiredNotRenewed" label="已过期未续签" width="100" />
              <el-table-column prop="yearlyStats.pendingRenewal" label="未到期待续签" width="100" />
              <el-table-column prop="yearlyStats.renewalRate" label="续签率" width="100" />
              <el-table-column prop="yearlyStats.lostCustomers" label="已流失客户" width="100" />
            </el-table-column>
            
            <!-- 2025年10月续签情况 -->
            <el-table-column label="2025年10月续签情况">
              <el-table-column prop="monthlyStats.expiredCount" label="到期户数" width="100" />
              <el-table-column prop="monthlyStats.renewedCount" label="已续签户数" width="100" />
              <el-table-column prop="monthlyStats.notRenewedCount" label="未续签户数" width="100" />
              <el-table-column prop="monthlyStats.renewalRate" label="续签率" width="100" />
              <el-table-column prop="monthlyStats.lostCustomers" label="已流失客户" width="100" />
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.contract-renewal {
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 16px;
}

.header-section {
  background: white;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  
  .header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    
    .year-picker,
    .service-select {
      width: 140px;
    }
    
    .hide-checkbox {
      margin-left: 20px;
    }
    
    .report-link {
      margin-left: auto;
      color: #1890ff;
      text-decoration: none;
      font-size: 14px;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.main-content {
  background: white;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.overview-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.chart-panel {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  
  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    
    h3 {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
    }
    
    .chart-unit {
      font-size: 12px;
      color: #999;
    }
  }
  
  .chart-container {
    height: 300px;
  }
}

.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-group {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  
  .stats-header {
    background: #fafafa;
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8e8;
    
    h3 {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      text-align: center;
    }
  }
  
  .stats-content {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #ff9c00;
        margin-bottom: 8px;
      }
      
      .stat-label {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
      }
    }
  }
}

.analysis-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.distribution-panel {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  
  .distribution-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    
    .pie-chart {
      width: 100%;
      height: 200px;
    }
    
    .detail-btn {
      padding: 8px 16px;
      border: 1px solid #ff9c00;
      border-radius: 4px;
      background: white;
      color: #ff9c00;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      
      &:hover {
        background: #ff9c00;
        color: white;
      }
    }
  }
}

.contract-panel {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  
  .panel-header {
    margin-bottom: 16px;
    
    h3 {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      text-align: center;
    }
  }
  
  .panel-content {
    .distribution-stats {
      .dist-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .dist-label {
          color: #666;
          font-size: 14px;
        }
        
        .dist-value {
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

.table-section {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .filter-group {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .employee-select,
      .date-picker {
        width: 120px;
      }
      
      .date-separator {
        color: #666;
        margin: 0 8px;
      }
    }
    
    .table-actions {
      display: flex;
      gap: 8px;
      
      .export-btn,
      .help-btn {
        padding: 8px 16px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        font-size: 14px;
        
        &:hover {
          border-color: #409eff;
          color: #409eff;
        }
      }
    }
  }
  
  .table-container {
    .renewal-table {
      :deep(.el-table__header) {
        th {
          background: #fafafa;
          color: #333;
          font-weight: 600;
          text-align: center;
        }
      }
      
      :deep(.el-table__cell) {
        text-align: center;
      }
    }
  }
}

:deep(.el-date-editor),
:deep(.el-select) {
  .el-input__inner {
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
  }
}

:deep(.el-checkbox) {
  .el-checkbox__label {
    font-size: 14px;
    color: #606266;
  }
}

@media (max-width: 768px) {
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .analysis-section {
    grid-template-columns: 1fr;
  }
  
  .table-header {
    flex-direction: column;
    gap: 16px;
    
    .filter-group {
      justify-content: center;
    }
  }
}
</style>